import type { EChartsOption } from "echarts";
import * as echarts from 'echarts/core'

export function getOption():EChartsOption {
  const dataSource = [
    {
      value: '8',
      name: '千金',
      number:'13家',
      rate:'2%'
    },
    {
      value: '1',
      name: '南浔',
      number:'19家',
      rate:'56%'
    },
    {
      value: '2',
      name: '双林',
      number:'88家',
      rate:'66%'
    },
    {
      value: '3',
      name: '和孚',
      number:'77家',
      rate:'96%'
    },
    {
      value: '3',
      name: '善琏',
      number:'49家',
      rate:'22%'
    },
  ];

  const img3 = '';
  const img2 = '';
  const img1 = '';

  return  {
    grid: [
      {
        left: '1%',
        top: 15,
        right: 10,
        bottom: 30,
        containLabel: true,
      },
    ],
    xAxis: [
      {
        gridIndex: 0,
        type: 'value',
        axisLabel: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        axisTick: { show: false },
      },
      {
        gridIndex: 0,
        type: 'value',
        max: 100,
        axisLabel: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        axisTick: { show: false },
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        type: 'category',
        inverse: true,
        data: dataSource.map((item) => item.name),
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        axisLabel: {
          width: 80,
          padding: [0, 0, 0, -80],
          align: 'right',
          formatter: (name:any, index:any) => {
            const id = index + 1;
            if (id < 4) {
              return `{icon${id}|}{name|${name}}`;
            }else{
              return `{count|${id}}{name|${name}}`;
            }
          },
          rich: {
            icon1: {
              width: 35,
              height: 15,
              align: 'center',
              backgroundColor: {
                image: img1,
              },
            },
            icon2: {
              width: 35,
              height: 15,
              align: 'center',
              backgroundColor: {
                image: img2,
              },
            },
            icon3: {
              width: 35,
              height: 15,
              align: 'center',
              backgroundColor: {
                image: img3,
              },
            },
            count: {
              padding: [0, 0, 0, 0],
              width: 35,
              height: 15,
              color: '#A4E8E8',
              align: 'center',
              fontSize: 15,
              fontFamily: 'DIN',
              fontWeight: 500,
              fontStyle: 'italic',
            },
            name: {
              width:80,
              fontSize: 15,
              align: 'left',
              color: '#fff',
              fontFamily: 'Source Han Sans CN',
              fontWeight: 500,
            },
          },
        },
      },
      {
        gridIndex: 0,
        type: 'category',
        inverse: true,
        data: dataSource.map((item) => item.number + ' ' + item.rate),
        axisTick: { show: false },
        axisLine: { show: false },
        splitLine: { show: false },
        axisLabel: {
          color:'#ededed'
        },
      },
    ],
    series: [
      {
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        barWidth: 10,
        data: dataSource.map((item) => item.value),
        silent: false,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: 'rgb(69,129,57)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0, 255, 150, 1)', // 100% 处的颜色
                },
              ],
              false
          ),
        },
      },
    ],
  };
}
